<template>
  <div class="singer">
    <div class="card">
      <div class="top">
        <div class="are">
          语种：<span
            :class="item.area == areVal ? 'active' : ''"
            v-for="item in are"
            :key="item.area"
            @click="areaClick(item.area)"
            >{{ item.name }}</span
          >
        </div>
        <div class="type">
          分类：<span
            :class="item.type == typeVal ? 'active' : ''"
            v-for="item in type"
            :key="item.type"
            @click="typeClick(item.type)"
            >{{ item.name }}</span
          >
        </div>
        <div class="shaixuan">
          筛选：<span
            :class="item.initial == shaixuanVal ? 'active' : ''"
            v-for="item in shaixuan"
            :key="item.initial"
            @click="shaixuanClick(item.initial)"
            >{{ item.name }}</span
          >
        </div>
      </div>
      <div class="bottom">
        <div v-for="item in cardList" :key="item.id" class="singer_card">
          <img :src="item.img1v1Url" alt="" />
          <p>{{ item.name }}</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import request from "@/request/request";
export default {
  data() {
    return {
      are: [
        { area: -1, name: "全部" },
        { area: 7, name: "华语" },
        { area: 96, name: "欧美" },
        { area: 8, name: "日本" },
        { area: 16, name: "韩国" },
        { area: 0, name: "其它" },
      ],
      type: [
        { type: -1, name: "全部" },

        { type: 1, name: "男歌手" },

        { type: 2, name: "女歌手" },

        { type: 3, name: "乐队" },
      ],
      shaixuan: [
        { initial: -1, name: "热门" },

        { initial: "a", name: "A" },

        { initial: "b", name: "B" },

        { initial: "c", name: "C" },

        { initial: "d", name: "D" },

        { initial: "e", name: "E" },

        { initial: "f", name: "F" },

        { initial: "g", name: "G" },

        { initial: "h", name: "H" },

        { initial: "i", name: "I" },

        { initial: "j", name: "J" },

        { initial: "k", name: "K" },

        { initial: "l", name: "L" },
        { initial: "m", name: "M" },

        { initial: "n", name: "N" },

        { initial: "o", name: "O" },

        { initial: "p", name: "P" },

        { initial: "q", name: "Q" },

        { initial: "r", name: "R" },

        { initial: "s", name: "S" },

        { initial: "t", name: "T" },

        { initial: "u", name: "U" },

        { initial: "v", name: "V" },

        { initial: "w", name: "W" },

        { initial: "x", name: "X" },

        { initial: "y", name: "Y" },

        { initial: "z", name: "Z" },

        { initial: 0, name: "#" },
      ],
      cardList: [],
      areVal: "-1",
      typeVal: "-1",
      shaixuanVal: "-1",
    };
  },
  methods: {
    shaixuanClick(shaixuan) {
      this.shaixuanVal = shaixuan;
      this.getSingerList(this.areVal, this.typeVal, this.shaixuanVal);
    },
    typeClick(type) {
      this.typeVal = type;
      this.getSingerList(this.areVal, this.typeVal, this.shaixuanVal);
    },
    areaClick(area) {
      this.areVal = area;
      this.getSingerList(this.areVal, this.typeVal, this.shaixuanVal);
    },
    getSingerList(area, type, shaixuan) {
      request(
        `/artist/list?type=${area}&area=${type}&initial=${shaixuan}&offset=0`
      ).then((res) => {
        if(res.data.artists.length==0){
          return this.$message.info("该筛选项没有歌手数据，请重新筛选")
        }
        this.cardList = res.data.artists;
      });
    },
  },
  created() {
    this.getSingerList(
      this.are[0].area,
      this.type[0].type,
      this.shaixuan[0].initial
    );
  },
};
</script>

<style lang="less" scoped>
.singer {
  display: flex;
  padding: 30px;
  justify-content: center;
  .card {
    width: 1000px;
    .top {
      div {
        padding: 5px 0;
        width: 100%;
        word-break: break-all;

        span {
          font-size: 12px;
          padding: 3px 10px;
          font-weight: 700;
          cursor: pointer;
          line-height: 50px;
          &:not(:first-child) {
            margin-left: 30px;
          }
        }

        .active {
          background-color: rgba(253, 245, 245);
          color: rgba(235, 94, 114);
          border-radius: 10px;
        }
      }
    }
    .bottom {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      margin-top: 30px;
      .singer_card {
        
        img {
          width: 180px;
          height: 180px;
          border-radius: 30px;
        }
        p{
          padding-bottom:10px;
        }
      }
    }
  }
}
</style>